import React, { useState,useEffect } from 'react'
import {
    Modal,
    Form,
    Upload,
    Button,
    message,
} from "antd"
import hcpUtils from "@/utils/hcpUtils";
import cmdbres from "@/data/cmdbres";
import request, { download } from "@/utils/request";
import "./index.less";

const user = hcpUtils.getUser();
const ImportModal = (props)=>{
    const {
        visible,
        setVisible,
        onImportFinish,
        ...prop
    } = props

    const [form] = Form.useForm();
	const [fileList, setFileList] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if(visible){
            setFileList([]);
            form.resetFields();
        }
    }, [visible])

    const onFinish = async () => {
        if(fileList.length !== 1) {
            message.error("必须上传一个文件！");
            return;
        }
        const formData = new FormData();
        formData.append('file', fileList[0]);
        setLoading(true);
        const res = await request({
            ...cmdbres.importDefinitionModel,
            data: formData,
            headers: {
                "Content-Type":"multipart/form-data; boundary=----WebKitFormBoundaryweXIOplef1V0keZk",
            }
        });
        setLoading(false);
        if (res) {
            if(res.code == 200) {
                message.success("导入成功！");
                setVisible(false); 
                if(typeof onImportFinish == "function") onImportFinish(res,formData);
            }
        }
    }

    const uploadProps = {
		name: 'file',
        method: "post",
        multiple: false,
        accept:".json",
		headers: {
            ACCESS_TOKEN: hcpUtils.getToken(),
            token: hcpUtils.getToken(),
        },
        fileList:fileList,
        onRemove:(file) => {
            setFileList([]);
        },
        beforeUpload: (file,fileList) => {
            setFileList(fileList);
            return false;
        },
	};

    return (
        <Modal
			title="导入"
            className="hcp-modal-sm"
			visible={visible}
			footer={null}
			destroyOnClose
            onCancel={()=>{setVisible(false)}}
            {...prop}
		>
			<Form
				labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                form={form}
				onFinish={onFinish}
			>
                <Form.Item
                    label="上传文件"
                    name="importFile"
                    rules={[
                        {required:true,message:"请选择文件"}
                    ]}
                >
                    <div className="hcp_model_import_template">
                        <div className="hcp_import_div">
                            <Upload
                                {...uploadProps}
                            >
                                <span className="iconfont icon-shangchuanwenjian2"></span>
                                点击上传
                            </Upload>
                        </div>
                    </div>
                </Form.Item>
                <div className="hcp-modal-body-footer">
                    <Form.Item wrapperCol={{ span: 24 }}>
                        <Button
                            onClick={()=>{setVisible(false)}}
                        >
                            取消
                        </Button>
                        <Button
                            type="primary" htmlType="submit" loading={loading}>
                            开始导入
                        </Button>
                    </Form.Item>
                </div>
			</Form>
		</Modal>
    )
}

export default ImportModal